<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>点击停止定时器</button>
  <script>
    //setTimeout 本身就是一个全局函数(在哪儿都能使用), 延迟多久来执行函数中的代码
    //接受两个参数, 第一个是函数, 第二个是数字, 第二个参数是延时时间, 单位为『毫秒』 1000毫秒 = 1秒
    // setTimeout(function(){
    //   console.log('萧敬腾求婚成功, 坤坤可能塌方');
    // }, 1000);

    //setInterval 本身也是一个函数, 函数参数与 setTimeout 一模一样.
    //效果: 每过一段时间执行一次函数代码
    //1. 使用变量接收 setInterval 的返回值
    let timer = setInterval(function(){
      console.log('愿好好奔赴人生的同时，也要活的开心');
    }, 1000);

    //2. 调用函数 clearInterval
    //获取 button 按钮, querySelector 返回的结果是一个对象
    let btn = document.querySelector('button');
    //为 button 按钮绑定一个单击事件, 当 button 按钮被点击之后, 会执行函数中的代码
    btn.onclick = function(){
      clearInterval(timer);
    }

  </script>
</body>
</html>